<!DOCTYPE html>
<head>
    <title>iMusical</title>
    <!-- for-mobile-apps -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content=""/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!-- //for-mobile-apps -->
    <!-- Custom Theme files -->
    <link href="/static/front/css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="/static/front/css/style.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="/static/front/css/fasthover.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="/static/front/css/popuo-box.css" rel="stylesheet" type="text/css" media="all"/>
    <!-- //Custom Theme files -->
    <!-- font-awesome icons -->
    <link href="/static/front/css/font-awesome.css" rel="stylesheet">
    <!-- //font-awesome icons -->
    <!-- js -->
    <script src="/static/front/js/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.1/jquery.form.min.js" integrity="sha384-tIwI8+qJdZBtYYCKwRkjxBGQVZS3gGozr3CtI+5JF/oL1JmPEHzCEnIKbDbLTCer" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="/static/front/css/jquery.countdown.css"/> <!-- countdown -->
    <!-- //js -->
    <!-- web fonts -->
    <link href='http://fonts.googleapis.com/css?family=Glegoo:400,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic'
          rel='stylesheet' type='text/css'>
    <!-- //web fonts -->
    <!-- start-smooth-scrolling -->
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            $(".scroll").click(function (event) {
                event.preventDefault();
                $('html,body').animate({scrollTop: $(this.hash).offset().top}, 1000);
            });
        });
    </script>
    <!-- //end-smooth-scrolling -->
</head>
<body>
<!-- for bootstrap working -->
<script type="text/javascript" src="/static/front/js/bootstrap-3.1.1.min.js"></script>
<!-- //for bootstrap working -->
<!-- header modal -->
<div class="modal fade" id="myModal88" tabindex="-1" role="dialog" aria-labelledby="myModal88"
     aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">Don't Wait, Login now!</h4>
            </div>
            <div class="modal-body modal-body-sub">
                <div class="row">
                    <div class="col-md-8 modal_body_left modal_body_left1"
                         style="border-right: 1px dotted #C2C2C2;padding-right:3em;">
                        <div class="sap_tabs">
                            <div id="horizontalTab" style="display: block; width: 100%; margin: 0px;">
                                <ul>
                                    <li class="resp-tab-item" aria-controls="tab_item-0"><span>Sign in</span></li>
                                    <li class="resp-tab-item" aria-controls="tab_item-1"><span>Sign up</span></li>
                                </ul>
                                <div class="tab-1 resp-tab-content" aria-labelledby="tab_item-0">
                                    <div class="facts">
                                        <div class="register">
                                            <form action="/login_front/" method="post">
                                                {% csrf_token %}
                                                <input name="Username" id="Username1" placeholder="Username" type="text"
                                                       required="required">
                                                <input name="Password" id="Password1" placeholder="Password"
                                                       type="password" required="required">
                                                <div class="sign-up">
                                                    <input type="submit" value="Sign in"/>
                                                </div>

                                                {#                                                    <script type="text/javascript">#}
                                                {#                                                        function login_check() {#}
                                                {#                                                            var username = $("#Username1").val();#}
                                                {#                                                            var password = $("#Password1").val();#}
                                                {#                                                            var flag = true;#}
                                                {#                                                            $.ajax({#}
                                                {#                                                                url: '/login_front/',#}
                                                {#                                                                async: false,  // 设置同步方式#}
                                                {#                                                                type: 'POST',#}
                                                {#                                                                data: {'username':username,#}
                                                {#                                                                        'password':password},#}
                                                {#                                                                dataType: 'json',#}
                                                {##}
                                                {#                                                                success: function(data) {#}
                                                {#                                                                    #}
                                                {#                                                                }#}
                                                {#                                                            });#}
                                                {#                                                        }#}
                                                {#                                                    </script>#}

                                            </form>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-2 resp-tab-content" aria-labelledby="tab_item-1">
                                    <div class="facts">
                                        <div class="register">
                                            <form action="/register/" method="post" onsubmit="return register_check()">
                                                {% csrf_token %}
                                                <input placeholder="Username" id="Username" name="Username" type="text"
                                                       required="required">
                                                <input placeholder="Email Address" name="Email" type="email"
                                                       required="required">
                                                <input placeholder="Phone" name="Phone" type="text" required="required"
                                                       style="margin:1em 0 0">
                                                <input placeholder="Password" id="Password" name="Password"
                                                       type="password" required="required">
                                                <input placeholder="Confirm Password" id="rPassword" name="rPassword"
                                                       type="password" required="required"><span id="querensuccess"
                                                                                                 class="input-group-addon green hide"><i
                                                    class="fa fa-check-circle"></i></span>

                                                <script type="text/javascript">
                                                    function register_check() {
                                                        var username = $("#Username").val();
                                                        var flag = true;
                                                        // 用flag的方式，使得子函数$.ajax与主函数check()交互起来
                                                        // 否则ajax内部的return false 不能组织表单提交

                                                        $.ajax({
                                                            url: '/check_username/',
                                                            async: false,  // 设置同步方式
                                                            type: 'POST',
                                                            data: {'username': username},
                                                            dataType: 'json',

                                                            success: function (data) {
                                                                if (data['result'] == 1) {
                                                                    var password = $("#Password").val();
                                                                    var rpassword = $("#rPassword").val();
                                                                    if (rpassword != password) {
                                                                        alert('两次密码不一致！');
                                                                        flag = false;
                                                                    }
                                                                }
                                                                else {
                                                                    alert('用户名已被使用！');
                                                                    flag = false;
                                                                }
                                                            },
                                                        });

                                                        if (!flag) {
                                                            return false;
                                                        }
                                                    }
                                                </script>
                                                <div class="sign-up">
                                                    <input type="submit" value="Create Account"/>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <script src="/static/front/js/easyResponsiveTabs.js" type="text/javascript"></script>
                        <script type="text/javascript">
                            $(document).ready(function () {
                                $('#horizontalTab').easyResponsiveTabs({
                                    type: 'default', //Types: default, vertical, accordion
                                    width: 'auto', //auto or any width like 600px
                                    fit: true   // 100% fit in a container
                                });
                            });
                        </script>
                        <div id="OR" class="hidden-xs">OR</div>
                    </div>
                    <div class="col-md-4 modal_body_right modal_body_right1">
                        <div class="row text-center sign-with">
                            <div class="col-md-12">
                                <h3 class="other-nw">Sign in with</h3>
                            </div>
                            <div class="col-md-12">
                                <ul class="social">
                                    <li class="social_facebook"><a href="#" class="entypo-facebook"></a></li>
                                    <li class="social_dribbble"><a href="#" class="entypo-dribbble"></a></li>
                                    <li class="social_twitter"><a href="#" class="entypo-twitter"></a></li>
                                    <li class="social_behance"><a href="#" class="entypo-behance"></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- header modal -->
<!-- header -->
<div class="header" id="home1">
    <div class="container">
        <div class="w3l_login">
            {% if login_status == 1 %}
                <a href="#" onclick="xianshi()" title="已登陆，用户名：{{ username }}">
                    <span class="glyphicon glyphicon-user" aria-hidden="true"></span></a>
                <button id="signoutbt" class="btn btn-default hide" style="width:50px;height:30px"
                        onclick="window.location.href='/logout_front/'">退出
                </button>
                <script type="text/javascript">
                    function xianshi() {
                        if ($('#signoutbt').hasClass('hide')) {
                            $('#signoutbt').removeClass('hide');
                        } else {
                            $('#signoutbt').addClass('hide');
                        }
                    }
                </script>
            {% else %}
                <a href="#" data-toggle="modal" data-target="#myModal88" title="点击登录">
                    <span class="glyphicon glyphicon-user" aria-hidden="true"></span></a>
            {% endif %}
        </div>
        <div class="w3l_logo" style="margin-left: 15em">
            <h1>
                <!-- <i class="fa fa-music bounce bounceIn animated" aria-hidden="true"></i> -->
                <a href="index.html">Musical Instrument Store<span>Your stores. Your place.</span></a>
            </h1>
        </div>
        <div class="search">
            <input class="search_box" type="checkbox" id="search_box">
            <label class="icon-search" for="search_box"><span class="glyphicon glyphicon-search"
                                                              aria-hidden="true"></span></label>
            <div class="search_form">
                <form action="/search/" method="post">
                    {% csrf_token %}
                    <input type="text" name="query" placeholder="Search...">
                    <input type="submit" value="Send">
                </form>
            </div>
        </div>
        <div class="cart cart box_1">
            <form action="#" method="post" class="last">
                <input type="hidden" name="cmd" value="_cart"/>
                <input type="hidden" name="display" value="1"/>
                <button class="w3view-cart" type="submit" name="submit" value=""><i class="fa fa-cart-arrow-down"
                                                                                    aria-hidden="true"></i></button>
            </form>
        </div>
    </div>
</div>
<!-- //header -->
<!-- navigation -->
<div class="navigation">
    <div class="container">
        <nav class="navbar navbar-default">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header nav_2">
                <button type="button" class="navbar-toggle collapsed navbar-toggle1" data-toggle="collapse"
                        data-target="#bs-megadropdown-tabs">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="bs-megadropdown-tabs">
                <ul class="nav navbar-nav">
                    <li><a href="{% url 'index_front' %}" class="act">Home</a></li>
                    <!-- Mega Menu -->
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Products <b class="caret"></b></a>
                        <ul class="dropdown-menu multi-column columns-3">
                            <div class="row">
                                <div class="col-sm-3">
                                    <ul class="multi-column-dropdown">
                                        <h6> Categories</h6>
                                        <li><a href="{% url 'products_show' %}?type=吉他">Guitar</a></li>
                                        <li><a href="{% url 'products_show' %}?type=小提琴">Violin <span>New</span></a></li>
                                        <li><a href="{% url 'products_show' %}?type=架子鼓">Drum </a></li>
                                        <li><a href="{% url 'products_show' %}?type=钢琴">Piano <span>New</span></a></li>
                                        <li><a href="{% url 'products_show' %}?type=萨克斯">Saxophone</a></li>
{#                                        <li><a href="{% url 'products_show' %}?type=其他">Others <span>New</span></a></li>#}
                                    </ul>
                                </div>
                                <div class="col-sm-3">
                                    <ul class="multi-column-dropdown">
                                        <h6> Brands </h6>
                                        <li><a href="{% url 'products_show' %}?brand=雅马哈">YAMAHA</a></li>
                                        <li><a href="{% url 'products_show' %}?brand=海伦">HAILUN</a></li>
                                        <li><a href="{% url 'products_show' %}?brand=星海">星海 <span>New</span></a></li>
                                        <li><a href="{% url 'products_show' %}?brand=凤玲">ROLAND</a></li>
                                        <li><a href="{% url 'products_show' %}"><i>Open </i></a></li>
                                    </ul>
                                </div>
                                <!--<div class="col-sm-2">-->
                                <!--<ul class="multi-column-dropdown">-->
                                <!--<h6>Home</h6>-->
                                <!--<li><a href="products2.html">Tv</a></li>-->
                                <!--<li><a href="products2.html">Camera</a></li>-->
                                <!--<li><a href="products2.html">AC</a></li>-->
                                <!--<li><a href="products2.html">Grinders</a></li>-->
                                <!--</ul>-->
                                <!--</div>-->
                                <div class="col-sm-4">
                                    <div class="w3ls_products_pos">
                                        <h4>30%<i>Off/-</i></h4>
                                        <img src="/static/front/images/products/4.jpg" alt=" " class="img-responsive"/>
                                    </div>
                                </div>
                                <div class="clearfix"></div>
                            </div>
                        </ul>
                    </li>
                    <li><a href="{% url 'pay' %}">Pay</a></li>
{#                    <li><a href="about.html">About Us</a></li>#}
                    <li><a href="{% url 'user_center' %}">User Center</a></li>
                    <li><a href="{% url 'index_back' %}">Enter MIS</a></li>
                </ul>
            </div>
        </nav>
    </div>
</div>
<!-- //navigation -->
{% block content %}

    <script>
        {#  判断是否登陆，如果没有登陆会弹出登陆框          #}
        jQuery(document).ready(function () {
            if ({{ login_status }} != 1 )
            {
                $('#myModal88').modal('show');
            }
        })
    </script>

    <!-- banner -->
    <div class="banner">
        <!-- <div class="container">
            <h3>Electronic Store, <span>Special Offers</span></h3>
        </div> -->
    </div>
    <!-- //banner -->
    <!-- banner-bottom -->
    <div class="banner-bottom">
        <div class="container">
            <div class="col-md-5 wthree_banner_bottom_left">
                <div class="video-img">
                    <!-- <a class="play-icon popup-with-zoom-anim" href="#small-dialog">
                        <span class="glyphicon glyphicon-expand" aria-hidden="true"></span>
                    </a> -->
                </div>
                <!-- pop-up-box -->
                <script src="/static/front/js/jquery.magnific-popup.js" type="text/javascript"></script>
                <!--//pop-up-box -->
                <div id="small-dialog" class="mfp-hide">
                    <iframe src=""></iframe>
                </div>
                <script>
                    $(document).ready(function () {
                        $('.popup-with-zoom-anim').magnificPopup({
                            type: 'inline',
                            fixedContentPos: false,
                            fixedBgPos: true,
                            overflowY: 'auto',
                            closeBtnInside: true,
                            preloader: false,
                            midClick: true,
                            removalDelay: 300,
                            mainClass: 'my-mfp-zoom-in'
                        });

                    });
                </script>
            </div>
            <div class="col-md-7 wthree_banner_bottom_right">
                <div class="bs-example bs-example-tabs" role="tabpanel" data-example-id="togglable-tabs">
                    <ul id="myTab" class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#home" id="home-tab" role="tab"
                                                                  data-toggle="tab" aria-controls="home">Guitar</a></li>
                        <li role="presentation"><a href="#audio" role="tab" id="audio-tab" data-toggle="tab"
                                                   aria-controls="audio">Violin</a></li>
                        <li role="presentation"><a href="#video" role="tab" id="video-tab" data-toggle="tab"
                                                   aria-controls="video">Piano</a></li>
                        <li role="presentation"><a href="#tv" role="tab" id="tv-tab" data-toggle="tab"
                                                   aria-controls="tv"> Saxophone </a></li>
                        <li role="presentation"><a href="#kitchen" role="tab" id="kitchen-tab" data-toggle="tab"
                                                   aria-controls="kitchen">Drum</a></li>
                    </ul>

                    <div id="myTabContent" class="tab-content">
                        <div role="tabpanel" class="tab-pane fade active in" id="home" aria-labelledby="home-tab">
                            <div class="agile_ecommerce_tabs">
                               {% for p in Guiter_product %}
                                <div class="col-md-4 agile_ecommerce_tab_left">
                                    <div class="hs-wrapper">
                                        <img src="{{p.picture}}" alt=" " class="img-responsive"/>
                                        <img src="{{p.picture}}" alt=" " class="img-responsive"/>
                                        <img src="{{p.picture}}" alt=" " class="img-responsive"/>
                                        <img src="{{p.picture}}" alt=" " class="img-responsive"/>
                                        <img src="{{p.picture}}" alt=" " class="img-responsive"/>
                                        <img src="{{p.picture}}" alt=" " class="img-responsive"/>
                                        <div class="w3_hs_bottom">
                                            <ul>
                                                <li>
                                                    <a href="#" data-toggle="modal" data-target="#myModal{{p.id}}"><span
                                                            class="glyphicon glyphicon-eye-open"
                                                            aria-hidden="true"></span></a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <h5><a href="{% url 'single_product' %}?id={{ p.id }}">{{p.name}}</a></h5>
                                    <div class="simpleCart_shelfItem">
                                        <p><span>${{p.old_price}}</span> <i class="item_price">${{p.new_price}}</i></p>
                                        <h6>音色试听</h6>
                                            <audio id="music1" controls style="width:175px;height:40px">
                                            Your browser does not support the audio tag.
                                                <source src="/static/front/music/风之诗.m4a" >
                                            </audio>
                                        <form action="#" method="post">
                                            <input type="hidden" name="cmd" value="_cart"/>
                                            <input type="hidden" name="add" value="1"/>
                                            <input type="hidden" name="w3ls_item" value="{{p.name}}"/>
                                            <input type="hidden" name="amount" value="{{p.new_price}}"/>
                                            <button type="submit" class="w3ls-cart">Add to cart</button>
                                        </form>
                                    </div>
                                </div>
                                {% endfor %}
                                <div class="clearfix"></div>
                            </div>
                        </div>

                        <div role="tabpanel" class="tab-pane fade" id="audio" aria-labelledby="audio-tab">
                            <div class="agile_ecommerce_tabs">
                                 {% for p in Violin_product %}
                                <div class="col-md-4 agile_ecommerce_tab_left">
                                    <div class="hs-wrapper">
                                        <img src="{{p.picture}}" alt=" " class="img-responsive"/>
                                        <img src="{{p.picture}}" alt=" " class="img-responsive"/>
                                        <img src="{{p.picture}}" alt=" " class="img-responsive"/>
                                        <img src="{{p.picture}}" alt=" " class="img-responsive"/>
                                        <img src="{{p.picture}}" alt=" " class="img-responsive"/>
                                        <img src="{{p.picture}}" alt=" " class="img-responsive"/>
                                        <div class="w3_hs_bottom">
                                            <ul>
                                                <li>
                                                    <a href="#" data-toggle="modal" data-target="#myModal{{p.id}}"><span
                                                            class="glyphicon glyphicon-eye-open"
                                                            aria-hidden="true"></span></a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <h5><a href="{% url 'single_product' %}?id={{ p.id }}">{{p.name}}</a></h5>
                                    <div class="simpleCart_shelfItem">
                                        <p><span>${{p.old_price}}</span> <i class="item_price">${{p.new_price}}</i></p>
                                        <h6>音色试听</h6>
                                            <audio id="music1" controls style="width:175px;height:40px">
                                            Your browser does not support the audio tag.
                                                <source src="/static/front/music/风之诗.m4a" >
                                            </audio>
                                        <form action="#" method="post">
                                            <input type="hidden" name="cmd" value="_cart"/>
                                            <input type="hidden" name="add" value="1"/>
                                            <input type="hidden" name="w3ls_item" value="{{p.name}}"/>
                                            <input type="hidden" name="amount" value="{{p.new_price}}"/>
                                            <button type="submit" class="w3ls-cart">Add to cart</button>
                                        </form>
                                    </div>
                                </div>
                                {% endfor %}
                                <div class="clearfix"></div>
                            </div>
                        </div>

                        <div role="tabpanel" class="tab-pane fade" id="video" aria-labelledby="video-tab">
                            <div class="agile_ecommerce_tabs">
                                {% for p in Piano_product %}
                                <div class="col-md-4 agile_ecommerce_tab_left">
                                    <div class="hs-wrapper">
                                        <img src="{{p.picture}}" alt=" " class="img-responsive"/>
                                        <img src="{{p.picture}}" alt=" " class="img-responsive"/>
                                        <img src="{{p.picture}}" alt=" " class="img-responsive"/>
                                        <img src="{{p.picture}}" alt=" " class="img-responsive"/>
                                        <img src="{{p.picture}}" alt=" " class="img-responsive"/>
                                        <img src="{{p.picture}}" alt=" " class="img-responsive"/>
                                        <div class="w3_hs_bottom">
                                            <ul>
                                                <li>
                                                    <a href="#" data-toggle="modal" data-target="#myModal{{p.id}}"><span
                                                            class="glyphicon glyphicon-eye-open"
                                                            aria-hidden="true"></span></a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <h5><a href="{% url 'single_product' %}?id={{ p.id }}">{{p.name}}</a></h5>
                                    <div class="simpleCart_shelfItem">
                                        <p><span>${{p.old_price}}</span> <i class="item_price">${{p.new_price}}</i></p>
                                        <h6>音色试听</h6>
                                            <audio id="music1" controls style="width:175px;height:40px">
                                            Your browser does not support the audio tag.
                                                <source src="/static/front/music/风之诗.m4a" >
                                            </audio>
                                        <form action="#" method="post">
                                            <input type="hidden" name="cmd" value="_cart"/>
                                            <input type="hidden" name="add" value="1"/>
                                            <input type="hidden" name="w3ls_item" value="{{p.name}}"/>
                                            <input type="hidden" name="amount" value="{{p.new_price}}"/>
                                            <button type="submit" class="w3ls-cart">Add to cart</button>
                                        </form>
                                    </div>
                                </div>
                                {% endfor %}
                                <div class="clearfix"></div>
                            </div>
                        </div>

                        <div role="tabpanel" class="tab-pane fade" id="tv" aria-labelledby="tv-tab">
                            <div class="agile_ecommerce_tabs">
                             {% for p in Saxophone_product %}
                                <div class="col-md-4 agile_ecommerce_tab_left">
                                    <div class="hs-wrapper">
                                        <img src="{{p.picture}}" alt=" " class="img-responsive"/>
                                        <img src="{{p.picture}}" alt=" " class="img-responsive"/>
                                        <img src="{{p.picture}}" alt=" " class="img-responsive"/>
                                        <img src="{{p.picture}}" alt=" " class="img-responsive"/>
                                        <img src="{{p.picture}}" alt=" " class="img-responsive"/>
                                        <img src="{{p.picture}}" alt=" " class="img-responsive"/>
                                        <div class="w3_hs_bottom">
                                            <ul>
                                                <li>
                                                    <a href="#" data-toggle="modal" data-target="#myModal{{p.id}}"><span
                                                            class="glyphicon glyphicon-eye-open"
                                                            aria-hidden="true"></span></a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <h5><a href="{% url 'single_product' %}?id={{ p.id }}">{{p.name}}</a></h5>
                                    <div class="simpleCart_shelfItem">
                                        <p><span>${{p.old_price}}</span> <i class="item_price">${{p.new_price}}</i></p>
                                        <h6>音色试听</h6>
                                            <audio id="music1" controls style="width:175px;height:40px">
                                            Your browser does not support the audio tag.
                                                <source src="/static/front/music/风之诗.m4a" >
                                            </audio>
                                        <form action="#" method="post">
                                            <input type="hidden" name="cmd" value="_cart"/>
                                            <input type="hidden" name="add" value="1"/>
                                            <input type="hidden" name="w3ls_item" value="{{p.name}}"/>
                                            <input type="hidden" name="amount" value="{{p.new_price}}"/>
                                            <button type="submit" class="w3ls-cart">Add to cart</button>
                                        </form>
                                    </div>
                                </div>
                                {% endfor %}
                                <div class="clearfix"></div>
                            </div>
                        </div>

                        <div role="tabpanel" class="tab-pane fade" id="kitchen" aria-labelledby="kitchen-tab">
                            <div class="agile_ecommerce_tabs">
                                {% for p in Drum_product %}
                                <div class="col-md-4 agile_ecommerce_tab_left">
                                    <div class="hs-wrapper">
                                        <img src="{{p.picture}}" alt=" " class="img-responsive"/>
                                        <img src="{{p.picture}}" alt=" " class="img-responsive"/>
                                        <img src="{{p.picture}}" alt=" " class="img-responsive"/>
                                        <img src="{{p.picture}}" alt=" " class="img-responsive"/>
                                        <img src="{{p.picture}}" alt=" " class="img-responsive"/>
                                        <img src="{{p.picture}}" alt=" " class="img-responsive"/>
                                        <div class="w3_hs_bottom">
                                            <ul>
                                                <li>
                                                    <a href="#" data-toggle="modal" data-target="#myModal{{p.id}}"><span
                                                            class="glyphicon glyphicon-eye-open"
                                                            aria-hidden="true"></span></a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <h5><a href="{% url 'single_product' %}?id={{ p.id }}">{{p.name}}</a></h5>
                                    <div class="simpleCart_shelfItem">
                                        <p><span>${{p.old_price}}</span> <i class="item_price">${{p.new_price}}</i></p>
                                        <h6>音色试听</h6>
                                            <audio id="music1" controls style="width:175px;height:40px">
                                            Your browser does not support the audio tag.
                                                <source src="/static/front/music/风之诗.m4a" >
                                            </audio>
                                        <form action="#" method="post">
                                            <input type="hidden" name="cmd" value="_cart"/>
                                            <input type="hidden" name="add" value="1"/>
                                            <input type="hidden" name="w3ls_item" value="{{p.name}}"/>
                                            <input type="hidden" name="amount" value="{{p.new_price}}"/>
                                            <button type="submit" class="w3ls-cart">Add to cart</button>
                                        </form>
                                    </div>
                                </div>
                                {% endfor %}
                                <div class="clearfix"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>

    <!-- //banner-bottom -->

    <!-- modal-video -->
    {% for p in Products %}

    <div class="modal video-modal fade" id="myModal{{p.id}}" tabindex="-1" role="dialog" aria-labelledby="myModal{{p.id}}">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                </div>
                <section>
                    <div class="modal-body">
                        <div class="col-md-5 modal_body_left">
                            <img src="{{p.picture}}" alt=" " class="img-responsive"/>
                        </div>
                        <div class="col-md-7 modal_body_right">
                            <h4>{{p.name}}</h4>
                            <p>{{p.introduction}}</p>
                            <h5>库存：{{p.stock}}</h5>
                                <div class="clearfix"></div>
                            <div class="modal_body_right_cart simpleCart_shelfItem">
                                <p><span>${{p.old_price}}</span> <i class="item_price">${{p.new_price}}</i></p>
                                <h6>音色试听</h6>
                                            <audio id="music1" controls style="width:175px;height:40px">
                                            Your browser does not support the audio tag.
                                                <source src="/static/front/music/风之诗.m4a" >
                                            </audio>
                                <form action="#" method="post" class="addcart">
                                    <input type="hidden" name="cmd" value="_cart">
                                    <input type="hidden" name="add" value="1">
                                    <input type="hidden" name="w3ls_item" value="{{p.name}}">
                                    <input type="hidden" name="amount" value="{{p.new_price}}">
                                    <button type="submit" class="w3ls-cart">Add to cart</button>
                                </form>
                            </div>
                            <h5>Color</h5>
                            <div class="color-quality">
                                <ul>
                                    <li><a href="#" class="{{p.color}}"><span></span></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </section>
            </div>
        </div>
    </div>
    {% endfor %}

    <div class="modal video-modal fade" id="myModala" tabindex="-1" role="dialog" aria-labelledby="myModala">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                </div>
                <section>
                    <div class="modal-body">
                        <div class="col-md-5 modal_body_left">
                            <img src="/static/front/images/数据/34_1.jpg" alt=" " class="img-responsive"/>
                        </div>
                        <div class="col-md-7 modal_body_right">
                            <h4>雅马哈ELB02</h4>
                            <p>音色数: 201种以上；适用场景: 演奏；适用对象: 专业演奏；键数: 其他。</p>
                            <h5>库存：60</h5>
                            <div class="rating">
                                <div class="rating-left">
                                    <img src="/static/front/images/star-.png" alt=" " class="img-responsive"/>
                                </div>
                                <div class="rating-left">
                                    <img src="/static/front/images/star-.png" alt=" " class="img-responsive"/>
                                </div>
                                <div class="rating-left">
                                    <img src="/static/front/images/star-.png" alt=" " class="img-responsive"/>
                                </div>
                                <div class="rating-left">
                                    <img src="/static/front/images/star-.png" alt=" " class="img-responsive"/>
                                </div>
                                <div class="rating-left">
                                    <img src="/static/front/images/star-.png" alt=" " class="img-responsive"/>
                                </div>
                                <div class="clearfix"></div>
                            </div>
                            <div class="modal_body_right_cart simpleCart_shelfItem">
                                <p><span>$15800.00</span> <i class="item_price">$13800.00</i></p>
                                <h6>音色试听</h6>
                                            <audio id="music1" controls style="width:175px;height:40px">
                                            Your browser does not support the audio tag.
                                                <source src="/static/front/music/风之诗.m4a" >
                                            </audio>
                                <form action="#" method="post">
                                    <input type="hidden" name="add" value="1">
                                    <input type="hidden" name="amount" value="13800.00">
                                    <button type="submit" class="w3ls-cart">Add to cart</button>
                                </form>
                            </div>
                            <h5>Color</h5>
                            <div class="color-quality">
                                <ul>
                                    <li><a href="#" class="brown"><span></span></a></li>
                                    <li><a href="#" class="gray"><span></span></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </section>
            </div>
        </div>
    </div>

    <div class="modal video-modal fade" id="myModalb" tabindex="-1" role="dialog" aria-labelledby="myModalb">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                </div>
                <section>
                    <div class="modal-body">
                        <div class="col-md-5 modal_body_left">
                            <img src="/static/front/images/数据/33_1.jpg" alt=" " class="img-responsive"/>
                        </div>
                        <div class="col-md-7 modal_body_right">
                            <h4>雅马哈YDP103R电钢琴</h4>
                            <p>最大复音数: 64个；踏板数: 三踏板；键盘类型: 全配重键盘；键数: 88键；款式: 立式；智能类型: 其他智能。</p>
                            <h5>库存：55</h5>
                            <div class="rating">
                                <div class="rating-left">
                                    <img src="/static/front/images/star-.png" alt=" " class="img-responsive"/>
                                </div>
                                <div class="rating-left">
                                    <img src="/static/front/images/star-.png" alt=" " class="img-responsive"/>
                                </div>
                                <div class="rating-left">
                                    <img src="/static/front/images/star-.png" alt=" " class="img-responsive"/>
                                </div>
                                <div class="rating-left">
                                    <img src="/static/front/images/star.png" alt=" " class="img-responsive"/>
                                </div>
                                <div class="rating-left">
                                    <img src="/static/front/images/star.png" alt=" " class="img-responsive"/>
                                </div>
                                <div class="clearfix"></div>
                            </div>
                            <div class="modal_body_right_cart simpleCart_shelfItem">
                                <p><span>$5199.00</span> <i class="item_price">$4899.00</i></p>
                                <h6>音色试听</h6>
                                            <audio id="music1" controls style="width:175px;height:40px">
                                            Your browser does not support the audio tag.
                                                <source src="/static/front/music/风之诗.m4a" >
                                            </audio>
                                <form action="#" method="post">
                                    <input type="hidden" name="cmd" value="_cart">
                                    <input type="hidden" name="add" value="1">
                                    <input type="hidden" name="amount" value="4899.00">
                                    <button type="submit" class="w3ls-cart">Add to cart</button>
                                </form>
                            </div>
                            <h5>Color</h5>
                            <div class="color-quality">
                                <ul>
                                    <li><a href="#" class="black"><span></span></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </section>
            </div>
        </div>
    </div>

    <div class="modal video-modal fade" id="myModalc" tabindex="-1" role="dialog" aria-labelledby="myModalc">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                </div>
                <section>
                    <div class="modal-body">
                        <div class="col-md-5 modal_body_left">
                            <img src="/static/front/images/数据/32_1.jpg" alt=" " class="img-responsive"/>
                        </div>
                        <div class="col-md-7 modal_body_right">
                            <h4>星海XT-120小号</h4>
                            <p>材质：黄铜；适用对象：所有人。</p>
                            <h5>库存：39</h5>
                            <div class="rating">
                                <div class="rating-left">
                                    <img src="/static/front/images/star-.png" alt=" " class="img-responsive"/>
                                </div>
                                <div class="rating-left">
                                    <img src="/static/front/images/star-.png" alt=" " class="img-responsive"/>
                                </div>
                                <div class="rating-left">
                                    <img src="/static/front/images/star-.png" alt=" " class="img-responsive"/>
                                </div>
                                <div class="rating-left">
                                    <img src="/static/front/images/star-.png" alt=" " class="img-responsive"/>
                                </div>
                                <div class="rating-left">
                                    <img src="/static/front/images/star.png" alt=" " class="img-responsive"/>
                                </div>
                                <div class="clearfix"></div>
                            </div>
                            <div class="modal_body_right_cart simpleCart_shelfItem">
                                <p><span>$3500.00</span> <i class="item_price">$3128.00</i></p>
                                <h6>音色试听</h6>
                                            <audio id="music1" controls style="width:175px;height:40px">
                                            Your browser does not support the audio tag.
                                                <source src="/static/front/music/风之诗.m4a" >
                                            </audio>
                                <form action="#" method="post">
                                    <input type="hidden" name="cmd" value="_cart">
                                    <input type="hidden" name="add" value="1">
                                    <input type="hidden" name="amount" value="3128.00">
                                    <button type="submit" class="w3ls-cart">Add to cart</button>
                                </form>
                            </div>
                            <h5>Color</h5>
                            <div class="color-quality">
                                <ul>
                                    <li><a href="#" class="gold"><span></span></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </section>
            </div>
        </div>
    </div>

    <div class="modal video-modal fade" id="myModald" tabindex="-1" role="dialog" aria-labelledby="myModald">
         <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                </div>
                <section>
                    <div class="modal-body">
                        <div class="col-md-5 modal_body_left">
                            <img src="/static/front/images/数据/31_1.jpg" alt=" " class="img-responsive"/>
                        </div>
                        <div class="col-md-7 modal_body_right">
                            <h4>星海16孔XF-100初学者镀银长笛</h4>
                            <p>材质: 白铜；适用对象: 家庭教学；乐器调性: C调。</p>
                            <h5>库存：330</h5>
                            <div class="rating">
                                <div class="rating-left">
                                    <img src="/static/front/images/star-.png" alt=" " class="img-responsive"/>
                                </div>
                                <div class="rating-left">
                                    <img src="/static/front/images/star-.png" alt=" " class="img-responsive"/>
                                </div>
                                <div class="rating-left">
                                    <img src="/static/front/images/star-.png" alt=" " class="img-responsive"/>
                                </div>
                                <div class="rating-left">
                                    <img src="/static/front/images/star.png" alt=" " class="img-responsive"/>
                                </div>
                                <div class="rating-left">
                                    <img src="/static/front/images/star.png" alt=" " class="img-responsive"/>
                                </div>
                                <div class="clearfix"></div>
                            </div>
                            <div class="modal_body_right_cart simpleCart_shelfItem">
                                <p><span>$11502.00</span> <i class="item_price">$11501.00</i></p>
                                <h6>音色试听</h6>
                                            <audio id="music1" controls style="width:175px;height:40px">
                                            Your browser does not support the audio tag.
                                                <source src="/static/front/music/风之诗.m4a" >
                                            </audio>
                                <form action="#" method="post">
                                    <input type="hidden" name="cmd" value="_cart">
                                    <input type="hidden" name="add" value="1">
                                    <input type="hidden" name="w3ls_item" value="Induction Stove">
                                    <input type="hidden" name="amount" value="11501.00">
                                    <button type="submit" class="w3ls-cart">Add to cart</button>
                                </form>
                            </div>
                            <h5>Color</h5>
                            <div class="color-quality">
                                <ul>
                                    <li><a href="#" class="white"><span></span></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </section>
            </div>
        </div>
    </div>
    <!-- //modal-video -->
    <!-- banner-bottom1 -->
    <div class="banner-bottom1">
        <div class="agileinfo_banner_bottom1_grids">
            <div class="col-md-7 agileinfo_banner_bottom1_grid_left"
                 style="background-image: url(/static/front/images/products/4.jpg);">
                <h3>Grand Opening Event With flat<span>20% <i>Discount</i></span></h3>
                <a href="products.html">Shop Now</a>
            </div>
            <div class="col-md-5 agileinfo_banner_bottom1_grid_right"
                 style="background-image: url(/static/front/images/products/5.jpg);">
                <h4>hot deal</h4>
                <div class="timer_wrap">
                    <div id="counter"></div>
                </div>
                <script src="/static/front/js/jquery.countdown.js"></script>
                <script src="/static/front/js/script.js"></script>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
    <!-- //banner-bottom1 -->
    <!-- special-deals -->
    <div class="special-deals">
        <div class="container">
            <h2>Special Deals</h2>
            <div class="w3agile_special_deals_grids">
                <div class="col-md-7 w3agile_special_deals_grid_left">
                    <div class="w3agile_special_deals_grid_left_grid">
                        <img src="/static/front/images/products/6.jpg" alt=" " style="height: 288.19px; width: 635px;"
                             class="img-responsive"/>
                        <div class="w3agile_special_deals_grid_left_grid_pos1">
                            <h5>30%<span>Off/-</span></h5>
                        </div>
                        <div class="w3agile_special_deals_grid_left_grid_pos">
                            <h4>We Offer <span>Best Products</span></h4>
                        </div>
                    </div>
                    <div class="wmuSlider example1">
                        <div class="wmuSliderWrapper">
                            <article style="position: absolute; width: 100%; opacity: 0;">
                                <div class="banner-wrap">
                                    <div class="w3agile_special_deals_grid_left_grid1">
                                        <img src="/static/front/images/t1.png" alt=" " class="img-responsive"/>
                                        <p>Quis autem vel eum iure reprehenderit qui in ea voluptate
                                            velit esse quam nihil molestiae consequatur, vel illum qui dolorem
                                            eum fugiat quo voluptas nulla pariatur</p>
                                        <h4>Laura</h4>
                                    </div>
                                </div>
                            </article>
                            <article style="position: absolute; width: 100%; opacity: 0;">
                                <div class="banner-wrap">
                                    <div class="w3agile_special_deals_grid_left_grid1">
                                        <img src="/static/front/images/t2.png" alt=" " class="img-responsive"/>
                                        <p>Quis autem vel eum iure reprehenderit qui in ea voluptate
                                            velit esse quam nihil molestiae consequatur, vel illum qui dolorem
                                            eum fugiat quo voluptas nulla pariatur</p>
                                        <h4>Michael</h4>
                                    </div>
                                </div>
                            </article>
                            <article style="position: absolute; width: 100%; opacity: 0;">
                                <div class="banner-wrap">
                                    <div class="w3agile_special_deals_grid_left_grid1">
                                        <img src="/static/front/images/t3.png" alt=" " class="img-responsive"/>
                                        <p>Quis autem vel eum iure reprehenderit qui in ea voluptate
                                            velit esse quam nihil molestiae consequatur, vel illum qui dolorem
                                            eum fugiat quo voluptas nulla pariatur</p>
                                        <h4>Rosy</h4>
                                    </div>
                                </div>
                            </article>
                        </div>
                    </div>
                    <script src="/static/front/js/jquery.wmuSlider.js"></script>
                    <script>
                        $('.example1').wmuSlider();
                    </script>
                </div>
                <div class="col-md-5 w3agile_special_deals_grid_right">
                    <img src="/static/front/images/products/7.jpg" alt=" " style="height: 600px;width: 400px"
                         class="img-responsive"/>
                    <div class="w3agile_special_deals_grid_right_pos">
                        <h4>Women's <span>Special</span></h4>
                        <h5>save up <span>to</span> 30%</h5>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
    <!-- //special-deals -->
    <!-- new-products -->
    <div class="new-products">
        <div class="container">
            <h3>New Products</h3>
            <div class="agileinfo_new_products_grids">
                <div class="col-md-3 agileinfo_new_products_grid">
                    <div class="agile_ecommerce_tab_left agileinfo_new_products_grid1">
                        <div class="hs-wrapper hs-wrapper1">
                            <img src="/static/front/images/数据/33_1.jpg" alt=" " class="img-responsive"/>
                            <img src="/static/front/images/数据/33_3.jpg" alt=" " class="img-responsive"/>
                            <img src="/static/front/images/数据/33_1.jpg" alt=" " class="img-responsive"/>
                            <img src="/static/front/images/数据/33_3.jpg" alt=" " class="img-responsive"/>
                            <img src="/static/front/images/数据/33_1.jpg" alt=" " class="img-responsive"/>
                            <img src="/static/front/images/数据/33_3.jpg" alt=" " class="img-responsive"/>
                            <div class="w3_hs_bottom w3_hs_bottom_sub">
                                <ul>
                                    <li>
                                        <a href="#" data-toggle="modal" data-target="#myModalb"><span
                                                class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <h5><a href="single.html">雅马哈YDP103R</a></h5>
                        <div class="simpleCart_shelfItem">
                            <p><span>$5199.00</span> <i class="item_price">$4899.00</i></p>
                            <h6>音色试听</h6>
                                            <audio id="music1" controls style="width:175px;height:40px">
                                            Your browser does not support the audio tag.
                                                <source src="/static/front/music/风之诗.m4a" >
                                            </audio>
                            <form action="#" method="post">
                                <input type="hidden" name="cmd" value="_cart">
                                <input type="hidden" name="add" value="1">
                                <input type="hidden" name="amount" value="4899.00">
                                <button type="submit" class="w3ls-cart">Add to cart</button>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 agileinfo_new_products_grid">
                    <div class="agile_ecommerce_tab_left agileinfo_new_products_grid1">
                        <div class="hs-wrapper hs-wrapper1">
                            <img src="/static/front/images/数据/34_1.jpg" alt=" " class="img-responsive"/>
                            <img src="/static/front/images/数据/34_2.jpg" alt=" " class="img-responsive"/>
                            <img src="/static/front/images/数据/34_1.jpg" alt=" " class="img-responsive"/>
                            <img src="/static/front/images/数据/34_2.jpg" alt=" " class="img-responsive"/>
                            <img src="/static/front/images/数据/34_1.jpg" alt=" " class="img-responsive"/>
                            <img src="/static/front/images/数据/34_2.jpg" alt=" " class="img-responsive"/>
                            <div class="w3_hs_bottom w3_hs_bottom_sub">
                                <ul>
                                    <li>
                                        <a href="#" data-toggle="modal" data-target="#myModala"><span
                                                class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <h5><a href="single.html">雅马哈ELB02</a></h5>
                        <div class="simpleCart_shelfItem">
                            <p><span>$15800</span> <i class="item_price">$13800</i></p>
                            <h6>音色试听</h6>
                                            <audio id="music1" controls style="width:175px;height:40px">
                                            Your browser does not support the audio tag.
                                                <source src="/static/front/music/风之诗.m4a" >
                                            </audio>
                            <form action="#" method="post">
                                <input type="hidden" name="cmd" value="_cart">
                                <input type="hidden" name="add" value="1">
                                <input type="hidden" name="amount" value="13800.00">
                                <button type="submit" class="w3ls-cart">Add to cart</button>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="col-md-3 agileinfo_new_products_grid">
                    <div class="agile_ecommerce_tab_left agileinfo_new_products_grid1">
                        <div class="hs-wrapper hs-wrapper1">
                            <img src="/static/front/images/数据/32_1.jpg" alt=" " class="img-responsive"/>
                            <img src="/static/front/images/数据/32_3.jpg" alt=" " class="img-responsive"/>
                            <img src="/static/front/images/数据/32_1.jpg" alt=" " class="img-responsive"/>
                            <img src="/static/front/images/数据/32_3.jpg" alt=" " class="img-responsive"/>
                            <img src="/static/front/images/数据/32_1.jpg" alt=" " class="img-responsive"/>
                            <img src="/static/front/images/数据/32_3.jpg" alt=" " class="img-responsive"/>
                            <div class="w3_hs_bottom w3_hs_bottom_sub">
                                <ul>
                                    <li>
                                        <a href="#" data-toggle="modal" data-target="#myModalc"><span
                                                class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <h5><a href="single.html">星海XT-120</a></h5>
                        <div class="simpleCart_shelfItem">
                            <p><span>$3500.00</span> <i class="item_price">$3128.00</i></p>
                            <h6>音色试听</h6>
                                            <audio id="music1" controls style="width:175px;height:40px">
                                            Your browser does not support the audio tag.
                                                <source src="/static/front/music/风之诗.m4a" >
                                            </audio>
                            <form action="#" method="post">
                                <input type="hidden" name="cmd" value="_cart">
                                <input type="hidden" name="add" value="1">
                                <input type="hidden" name="amount" value="3128.00">
                                <button type="submit" class="w3ls-cart">Add to cart</button>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="col-md-3 agileinfo_new_products_grid">
                    <div class="agile_ecommerce_tab_left agileinfo_new_products_grid1">
                        <div class="hs-wrapper hs-wrapper1">
                            <img src="/static/front/images/数据/31_1.jpg" alt=" " class="img-responsive"/>
                            <img src="/static/front/images/数据/31_3.jpg" alt=" " class="img-responsive"/>
                            <img src="/static/front/images/数据/31_1.jpg" alt=" " class="img-responsive"/>
                            <img src="/static/front/images/数据/31_3.jpg" alt=" " class="img-responsive"/>
                            <img src="/static/front/images/数据/31_1.jpg" alt=" " class="img-responsive"/>
                            <img src="/static/front/images/数据/31_3.jpg" alt=" " class="img-responsive"/>
                            <div class="w3_hs_bottom w3_hs_bottom_sub">
                                <ul>
                                    <li>
                                        <a href="#" data-toggle="modal" data-target="#myModald"><span
                                                class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <h5><a href="single.html">星海XF-100</a></h5>
                        <div class="simpleCart_shelfItem">
                            <p><span>$11502.00</span> <i class="item_price">$11501.00</i></p>
                            <h6>音色试听</h6>
                                            <audio id="music1" controls style="width:175px;height:40px">
                                            Your browser does not support the audio tag.
                                                <source src="/static/front/music/风之诗.m4a" >
                                            </audio>
                            <form action="#" method="post">
                                <input type="hidden" name="cmd" value="_cart">
                                <input type="hidden" name="add" value="1">
                                <input type="hidden" name="amount" value="11501.00">
                                <button type="submit" class="w3ls-cart">Add to cart</button>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
    <!-- //new-products -->
    <!-- top-brands -->
    <div class="top-brands">
        <div class="container">
            <h3>Top Brands</h3>
            <div class="sliderfig">
                <ul id="flexiselDemo1">
                    <li>
                        <img src="/static/front/images/brands/1.jpg" alt=" " class="img-responsive"/>
                    </li>
                    <li>
                        <img src="/static/front/images/brands/2.jpg" alt=" " class="img-responsive"/>
                    </li>
                    <li>
                        <img src="/static/front/images/brands/3.jpg" alt=" " class="img-responsive"/>
                    </li>
                    <li>
                        <img src="/static/front/images/brands/4.jpg" alt=" " class="img-responsive"/>
                    </li>
                    <li>
                        <img src="/static/front/images/brands/5.jpg" alt=" " class="img-responsive"/>
                    </li>
                    <li>
                        <img src="/static/front/images/brands/6.jpg" alt=" " class="img-responsive"/>
                    </li>
                </ul>
            </div>
            <script type="text/javascript">
                $(window).load(function () {
                    $("#flexiselDemo1").flexisel({
                        visibleItems: 4,
                        animationSpeed: 1000,
                        autoPlay: true,
                        autoPlaySpeed: 3000,
                        pauseOnHover: true,
                        enableResponsiveBreakpoints: true,
                        responsiveBreakpoints: {
                            portrait: {
                                changePoint: 480,
                                visibleItems: 1
                            },
                            landscape: {
                                changePoint: 640,
                                visibleItems: 2
                            },
                            tablet: {
                                changePoint: 768,
                                visibleItems: 3
                            }
                        }
                    });

                });
            </script>
            <script type="text/javascript" src="/static/front/js/jquery.flexisel.js"></script>
        </div>
    </div>
    <!-- //top-brands -->
    <!-- newsletter -->
    <div class="newsletter">
        <div class="container">
            <div class="col-md-6 w3agile_newsletter_left">
                <h3>Newsletter</h3>
                <p>Excepteur sint occaecat cupidatat non proident, sunt.</p>
            </div>
            <div class="col-md-6 w3agile_newsletter_right">
                <form action="#" method="post">
                    <input type="email" name="Email" placeholder="Email" required="">
                    <input type="submit" value=""/>
                </form>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
    <!-- //newsletter -->
{% endblock %}


{% block footer %}
    <!-- footer -->
    <div class="footer">
{#        <div class="container">#}
{#            <div class="w3_footer_grids">#}
{#                <div class="col-md-3 w3_footer_grid">#}
{#                    <h3>Contact</h3>#}
{#                    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse.</p>#}
{#                    <ul class="address">#}
{#                        <li><i class="glyphicon glyphicon-map-marker" aria-hidden="true"></i>1234k Avenue, 4th block,#}
{#                            <span>New York City.</span></li>#}
{#                        <li><i class="glyphicon glyphicon-envelope" aria-hidden="true"></i><a#}
{#                                href="mailto:info@example.com">info@example.com</a></li>#}
{#                        <li><i class="glyphicon glyphicon-earphone" aria-hidden="true"></i>+1234 567 567</li>#}
{#                    </ul>#}
{#                </div>#}
{#                <div class="col-md-3 w3_footer_grid">#}
{#                    <h3>Information</h3>#}
{#                    <ul class="info">#}
{#                        <li><a href="about.html">About Us</a></li>#}
{#                        <li><a href="mail.html">Contact Us</a></li>#}
{#                        <li><a href="codes.html">Short Codes</a></li>#}
{#                        <li><a href="faq.html">FAQ's</a></li>#}
{#                        <li><a href="products.html">Special Products</a></li>#}
{#                    </ul>#}
{#                </div>#}
{#                <div class="col-md-3 w3_footer_grid">#}
{#                    <h3>Category</h3>#}
{#                    <ul class="info">#}
{#                        <li><a href="products.html">Guiter</a></li>#}
{#                        <li><a href="products1.html">Violin</a></li>#}
{#                        <li><a href="products.html">Piano</a></li>#}
{#                        <li><a href="products1.html">Saxophone</a></li>#}
{#                        <li><a href="products2.html">Drum</a></li>#}
{#                    </ul>#}
{#                </div>#}
{#                <div class="col-md-3 w3_footer_grid">#}
{#                    <h3>Profile</h3>#}
{#                    <ul class="info">#}
{#                        <li><a href="/index.html">Home</a></li>#}
{#                        <li><a href="products.html">Today's Deals</a></li>#}
{#                    </ul>#}
{#                    <h4>Follow Us</h4>#}
{#                    <div class="agileits_social_button">#}
{#                        <ul>#}
{#                            <li><a href="#" class="facebook"> </a></li>#}
{#                            <li><a href="#" class="twitter"> </a></li>#}
{#                            <li><a href="#" class="google"> </a></li>#}
{#                            <li><a href="#" class="pinterest"> </a></li>#}
{#                        </ul>#}
{#                    </div>#}
{#                </div>#}
{#                <div class="clearfix"></div>#}
{#            </div>#}
{#        </div>#}
        <div class="footer-copy">
            <div class="footer-copy1">
                <div class="footer-copy-pos">
                    <a href="#home1" class="scroll"><img src="/static/front/images/arrow.png" alt=" "
                                                         class="img-responsive"/></a>
                </div>
            </div>
            <div class="container">
                <p>Copyright &copy; 2019. iMusical</p>
            </div>
        </div>
    </div>
{% endblock %}
<!-- //footer -->
<!-- cart-js -->
<script src="/static/front/js/minicart.js"></script>
<script>
    w3ls.render();

   // ***********从这里开始
   function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie != '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) == (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}


$.ajaxSetup({
    beforeSend: function(xhr, settings) {
	var csrftoken = getCookie('csrftoken');
	if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
    }
});
   $(".w3ls-cart").click(function(){
       var username=$(".w3l_login a").attr("title");
       var input1=$("<input type='hidden' name='username' />");
       input1.attr('value',username);
       $(this).parent("form").append(input1);
       $(this).parent("form").ajaxSubmit();
   });
    //#########到这里结束，是新加的内容，解决了跟购物车弹窗冲突问题，多次自动疯狂发ajax的问题（可能是与原本的js冲突了，但没找到冲突的的地方）

    w3ls.cart.on('w3sb_checkout', function (evt) {
        var items, len, i;

        if (this.subtotal() > 0) {
            items = this.items();

            for (i = 0, len = items.length; i < len; i++) {
            }
        }

    });
{#    //突然发现。缺了用户名，也就是要自己找id增加发送。#}
{#function testSubmit () {#}
{#    var username=$(".w3l_login a").attr("title");#}
{#       var input1=$("<input type='hidden' name='username' />");#}
{#       input1.attr('value',username);#}
{#       $(this).parent("form").append(input1);      //父节点form，异步提交#}
{#       $(this).parent("form").submit();              //区别在于不采用异步#}
{##}


    {#$(".sbmincart-submit").click(function(){#}
    {#    var sku=$(".;#}
    {#    var username=$(".w3l_login a").attr("title");#}
    {#    var input1=$("<input type='hidden' name='name' />");#}
    {#    input1.attr('value',username);#}
    {#    var input2=$("<input type='hidden' name='sku' />");#}
    {#    input2.attr('value',sku);#}
    {#    $(this).parent("form").append(input1,input2);#}
    {#   $(this).parent("form").ajaxSubmit();#}

</script>

<!-- //cart-js -->
</body>
</html>